<template>
  <div class="wrapper">
    <div class="info-wrapper">
      <div class="avatar">
        <van-image
          width="80"
          height="80"
          fit="cover"
          :src="userinfo.coverUrl | imageUri"
        />
      </div>
      <div class="infos">
        <div class="name">{{ userinfo.name }}</div>
        <div class="sex">
          <div>
            性别<span>{{ userinfo.sex }}</span>
          </div>
          <div>
            出生日期<span>{{
              $t.formatDate(new Date(userinfo.date)).split(" ")[0]
            }}</span>
          </div>
        </div>
        <div class="job">
          <div>
            工作<span>{{ userinfo.work }}</span>
          </div>
          <div>
            所在地<span>{{ userinfo.address }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="state-wrapper">
      <div class="ul">
        <div class="li">
          <div>说说</div>
          <div>{{ userinfo.ssDataNumber }}</div>
        </div>
        <div class="li">
          <div>日志</div>
          <div>{{ userinfo.rzDataNumber }}</div>
        </div>
        <!-- <div class="li">
          <div>照片</div>
          <div>{{ userinfo.photosNumber }}</div>
        </div>
        <div class="li">
          <div>相册</div>
          <div>{{ userinfo.albumNumber }}</div>
        </div> -->
        <!-- <div class="li">
          <div>视频</div>
          <div>{{ userinfo.videoNumber }}</div>
        </div>
        <div class="li">
          <div>频库</div>
          <div>{{ userinfo.videosNumber }}</div>
        </div> -->
        <div class="li">
          <div>文章</div>
          <div>{{ userinfo.skillNumber }}</div>
        </div>
        <div class="li">
          <div>积分</div>
          <div>{{ userinfo.integral }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    userinfo: {
      type: Object,
      default() {
        return {}
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.wrapper {
  margin-top: 10px;
  width: 100%;
}
.info-wrapper {
  padding: 0 6px;
  width: 100%;
  height: 80px;
  overflow: hidden;
  display: flex;
  font-size: 14px;
  .avatar {
    width: 100%;
    flex: 0 0 80px;
  }
  .infos {
    flex: 1;
    padding: 0 8px;
    .name {
      width: 100%;
      height: 30px;
      line-height: 30px;
      font-size: 16px;
    }
    .sex {
      width: 100%;
      height: 25px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .job {
      width: 100%;
      height: 25px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    span {
      color: $tmColor;
      margin-left: 6px;
    }
  }
}
.state-wrapper {
  margin-top: 10px;
  .ul {
    width: 100%;
    padding: 10px 0;
    flex-wrap: wrap;
    display: flex;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    .li {
      flex: 0 0 25%;
      height: 60px;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-content: center;
      div {
        flex: 0 0 100%;
        text-align: center;
        padding: 4px 0;
      }
    }
  }
}
</style>
